<template>
  <div class="FileView">
    <div class="and-types-left">
      <img
        width="46"
        height="56"
        style="margin-right: 11px"
        :src="getImgUrl()"
      />
      <span class="and-types-text">{{ fileUrl }}</span>
    </div>
    <i
      v-if="isSupportPreivew()"
      class="el-icon-view"
      @click="previewHandle()"
    ></i>
    <i class="el-icon-download" @click="downLoadHandle()"></i>
  </div>
</template>

<script>
export default {
  name: "FileView",
  props: ["fileUrl"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    isSupportPreivew() {
      const supportPreviewFileType = ["png", "jpg", "jpeg"];
      if (supportPreviewFileType.includes(this.fileTypeName())) {
        return true;
      }
      return false;
    },
    fileTypeName() {
      return this.fileUrl.split(".")[1];
    },
    previewHandle() {
      window.open("/local/uploadFiles/" + this.fileUrl, "__blank");
    },
    downLoadHandle() {
        window.open("/local/uploadFiles/" + this.fileUrl);
    },
    getImgUrl() {
        return require(`@/assets/icons/${this.fileTypeName()}.svg`)
    }
  },
};
</script>
<style lang="less" scoped>
.FileView {
  background-color: #fff;
  border: 1px solid #f5f6f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 10px;
  &:hover {
    background-color: #f5f7fa;
    i {
        display: block;
    }
  }
  .and-types-left {
    display: flex;
    align-items: center;
    .and-types-text {
        width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
  }
  i {
    cursor: pointer;
    display: none;
  }
}
</style>
